<template>
    <div class="main">
        <span> Search</span><input type="search" v-model="searcher">
        <glib :searcher="searcher" :gliList="GriList" :filer="gridColumns" />


    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import glib from './glib.vue';
const searcher = ref('');
const gridColumns = ref(['name', 'power'])
const GriList = [
    { name: 'Chuck Norris', power: Infinity },
    { name: 'Bruce Lee', power: 9000 },
    { name: 'Jackie Chan', power: 7000 },
    { name: 'Jet Li', power: 8000 }
]
</script>
<style>
.main {
    width: 400px;
    height: 600px;
    margin: 40px auto 0;
    border: 1px solid blue;
}
</style>